<template>
  <div class="card-detail">
    <div class="top-bt">
        <p class="revoke">联系墙主撕掉该标签</p>
        <p class="report">举报</p>
    </div>
    <note-card :note="card"></note-card>
    <div class="form">
        <textarea class="message" placeholder="请输入..." v-model="discuss"></textarea>
        <div class="bt">
            <input type="text" class="name" placeholder="签名" v-model="name">
            <lg-button :class="{notallowed:!isDis}" @click="submit">评论</lg-button>
        </div>        
    </div>
    <p class="title">评论{{ cards.comcount[0].count }}</p>
    <div class="comment">
        <div class="comment-li" v-for="(e,index) in comments" :key="index">
            <div class="user-head" :style={backgroundImage:portrait[e.imgurl]}></div>
            <div class="comm-m">
                <div class="m-top">
                    <p class="name">{{ e.name }}</p>
                    <p class="time">{{dateOne(e.moment)}}</p>
                </div>
                <div class="mm">{{ e.comment }}</div>
            </div>
        </div>
        <p class="more" v-show="nowpage>0" @click="getComment">加载更多</p>
    </div>
  </div>
</template>

<script>
import NoteCard from './NoteCard.vue';
import LgButton from './LgButton.vue';
import {portrait} from '@/utils/data'
import {dateOne} from '@/utils/lgmethod';
import { findCommentPageApi, insertCommentApi  } from '@/api/index';

export default {
    data(){
        return{
            comments:[],
            portrait,
            dateOne,
            idDis:true,
            discuss:'',  //输入内容
            name:'匿名',   //用户名
            user:this.$store.state.user,
            nowpage:1,
            pagesize:2

        }
    },
    props:{
        card:{
            default:{}  
        }
        
    },
    computed:{
        isDis(){
            if(this.discuss && this.name){
                return true
            }else{
                return false
            }
        },
        cards(){
            return this.card
        }
    },  
    components:{
        NoteCard,
        LgButton
    },
    methods:{
        submit(){
            if(this.isDis){
                let img=Math.floor(Math.random()*14);
                let data={
                    wallId:this.cards.id,
                    userId:this.user.id,
                    imgurl:img,
                    moment:new Date(),
                    name:this.name,
                    comment:this.discuss,
                };
                insertCommentApi(data).then(()=>{
                    this.comments.unshift(data)
                    this.cards.comcount[0].count++;
                    //清空评论框
                    this.discuss=''
                })
            }
            
        },
        getComment(){
            if(this.nowpage>0){
                let data={
                    id:this.cards.id,
                    page:this.nowpage,
                    pagesize:this.pagesize,
                }
                findCommentPageApi(data).then((res)=>{
                    this.comments=this.comments.concat(res.message);
                    if(res.message.length==this.pagesize){
                        this.nowpage++;
                    }else{this.nowpage=0}
                })
            }
        },

    },
    mounted(){
        this.getComment()
    },
    watch:{
        card(){
            //卡片发生变化
            this.nowpage=1;
            this.comments=[];
            this.getComment()
        }
    }
}
</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.card-detail{
    position: relative;
    padding: 0 @padding-20;
    .top-bt{
        position: fixed;
        padding: @padding-20;
        top: 0;
        left: 0;
        display: flex;
        .revoke{
            color: @primary-color;
            cursor: pointer;
            padding-right: 30px;
            font-size: @size-16;
        }
        .report{
            font-size: @size-16;
            color: @warning-color;
            cursor: pointer;
        }
    }
    .form{
        .message{
            background: none;
            resize:none;
            padding: @padding-8;
            box-sizing: border-box;
            height: 56px;
            width:100%;
            border: 1px solid rgba(148,148,148,1);
            margin-top: 12px;
        }
        .bt{
            display: flex;
            padding-top:6px ;
            justify-content: space-between;
        }
        .name{
            width: 200px;
            box-sizing: border-box;
            padding: @padding-8;
            background: none;
            line-height: 20px;
            border: 1px solid rgba(148,148,148,1);
        }
    }
    .title{
        font-weight: 600;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .more{
        color:@gray-2;
        text-align: center;
        cursor: pointer;
        padding: 20px;
    }
    .comment-li{
        display: flex;
        padding-bottom: 30px;
        .user-head{
            flex:none;
            width: 28px;
            height: 28px;
            border-radius: 20px;
            overflow: hidden;
        }
        .comm-m{
            padding-left:@padding-8 ;
        }
        .m-top{
            display: flex;
            align-items: center;
            .name{
                font-weight: 600;
            }
            .time{
                font-size: @size-12;
                padding-left: @padding-4;
                color: @gray-3;
            }
        }
        .mm{
            padding-top:@padding-4 ;
        }
    }
}
</style>